<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>goto(短网址服务)</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="static/css/bootstrap.min.css" rel="stylesheet" media="screen">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="../../assets/js/html5shiv.js"></script>
    <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <div class="container">
        <div class="page-header">
            <h1><strong>短</strong>网址 <small>链接变短更方便</small></h1>
        </div>
        <form role="form" action="/add" method="post">
            <div class="form-group">
                <input class="form-control" name="url" type="text" placeholder="Paste URL"/>
            </div>
            <div class="form-group">
                <label class="input-sm">goto/</label>
                <input name="alias" type="text" placeholder="自定义别名(可以为空)" />
            </div>
            <div class="form-group">
                <input class="btn btn-primary btn-lg" name="btnShort" value="缩短网址" type="button" />
            </div>
            <div class="form-group">
                <input class="form-control" name="resulturl" type="text" placeholder="结果"/>
            </div>
        </form>
        <div>
			<a href="/static/downloads/chrome-plugin-goto.crx"><h3>chrome plugin</h3><small>右击，另存为。 然后打开chrome的插件管理器，将文件拖进去</small></a>
		</div>
        <div>
            <!--
            <blockquote>
                <p>
                    Nothing lasts forever and life is limited.Everyone is equal before cancer.
                </p>
                <small>
                    Kaifu lee
                </small>
            </blockquote>
        -->
            <address>
                <p class="text-muted text-right"> <strong>bug report:</strong>
                    <a href="mailto:sunshengxiang01@baidu.com">sunshengxiang01@baidu.com</a>
                </p>
            </address>
        </div>

        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="static/js/jquery.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="static/js/bootstrap.min.js"></script>

        <script>
            $("input[name=btnShort]").click(function(){
                var url = $("input[name=url]").val();
                var alias = $("input[name=alias]").val();
                $.post("/api/add", {"url":url, "alias":alias}, function(data){
                    $result = $("input[name=resulturl]");
                    if (data.status == 0) {
                        $result.removeClass("btn-warning").val(data.tinyurl); 
                    } else {
                        $result.addClass("btn-warning").val(data.status_txt);
                    }
                });
            });  
        </script>
    </div>
</body>
</html>
